import React, { useEffect, useState } from 'react'
import { useNavigate,useLocation } from "react-router-dom"

import { findCategroyTreeDataApi } from "../../../apis/categoryApi"
import MyUpload from '../../../components/MyUpload'
import {findProductByIdApi} from "../../../apis/productApi"
import {
    Button,
    Cascader,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Card,
    message
} from 'antd';

const { RangePicker } = DatePicker;
const { TextArea } = Input;

export default function UpdateList() {
    const navigate = useNavigate()
    const [categoryData, setCategoryData] = useState([])
    const [typeId, setTypeId] = useState("")
    const [finalFileName,setFinalFileName] = useState("")
    const location = useLocation()
    const [product,setProduct] = useState({})
    const [form] = Form.useForm();
    useEffect(() => {
        fetchData()
        const id = location.state.id
        //发送请求到服务器获取商品详情
        fetchData2(id)
        // form.setFieldsValue({name:"小米",title:"性价比手机"})
    }, [])

    useEffect(()=>{
      //priduct:{name:"",title:"",type:{}}
      console.log(product);
      form.setFieldsValue({...product,type:["数码产品","手机"]})
    },[product])

    const fetchData2 =async (id)=>{
      const res = await findProductByIdApi({id})
      console.log(res);
      setProduct(res.data.data)
    }
    const back = () => {
        navigate("/home/list")
    }
    const onFinish = async (values) => {
        values.type = typeId
        values.imgSrc = finalFileName
        console.log(values);
        
    }
    const fetchData = async () => {
        const res = await findCategroyTreeDataApi()
        console.log(res);
        setCategoryData(res.data.data)
    }
    const cascaderChangeEvent = (p1, p2) => {
        console.log(p1);
        console.log(p2);
        setTypeId(p2[1]._id)
    }
    const uploadFile = (fileName)=>{
        setFinalFileName(fileName)
    }
    return (
        <Card
            size="default"
            title="修改商品"
            extra={<Button onClick={back}>返回</Button>}
            style={{
                width: "700px",
            }}
        >
            <Form
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 14,
                }}
                form={form}
                onFinish={onFinish}
                layout="horizontal"
                style={{
                    maxWidth: 600,
                }}
            >
                <Form.Item
                    label="商品名字"
                    name="name"
                    rules={[
                        { required: true, message: "商品名字必须填写" }
                    ]}
                >
                    <Input/>
                </Form.Item>
                <Form.Item label="商品描述" name="title">
                    <Input />
                </Form.Item>
                <Form.Item label="商品价格" name="price">
                    <InputNumber />
                </Form.Item>
                <Form.Item label="商品类型" name="type">
                    <Cascader
                        options={categoryData}
                        onChange={cascaderChangeEvent}
                    />
                </Form.Item>
                <Form.Item label="商品详情" name="msg">
                    <TextArea rows={4} />
                </Form.Item>
                <Form.Item label="商品图片" valuePropName="fileList">
                    <MyUpload 
                    name="imgSrc" 
                    action="http://nocat.life:8002/goods/fileUpload" 
                    uploadFile={uploadFile}
                    filePath={`http://nocat.life:8002/images/goods/${product.imgSrc}`}
                    ></MyUpload>
                </Form.Item>
                <Form.Item label="Button">
                    <Button type='primary' htmlType="submit">添加</Button>
                </Form.Item>
            </Form>
        </Card>
    )
}
